<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<link rel="stylesheet" type="text/css" href="http://tmall.fc62.com/mobile/themesmobile/68ecshopcom_mobile/css/teacherForm.css"/>
<script src="http://tmall.fc62.com/mobile/themesmobile/68ecshopcom_mobile/js/jquery.1.9.1.js"></script>
<script type="text/javascript" src="http://tmall.fc62.com/mobile/themesmobile/68ecshopcom_mobile/js/rem.js"></script>
<script type="text/javascript" src="http://tmall.fc62.com/mobile/themesmobile/68ecshopcom_mobile/js/vue.js"></script>
<!--<script type="text/javascript" src="http://tmall.fc62.com/mobile/themesmobile/68ecshopcom_mobile/js/axios.min.js"></script>-->
<link rel="stylesheet" type="text/css" href="http://tmall.fc62.com/mobile/themesmobile/68ecshopcom_mobile/css/layer.css" />
<script type="text/javascript" src="http://tmall.fc62.com/mobile/themesmobile/68ecshopcom_mobile/js/TouchSlide.1.1.js"></script>
<script type="text/javascript" src="http://tmall.fc62.com/mobile/themesmobile/68ecshopcom_mobile/js/layer_mobile/layer.js"></script>
<title>领取确认单</title>
<style>

</style>
</head>
<body>
	<div id="myapp">
		<div class="form-top">我是老师  我要领取</div>
		<div class="form-title">领取确认单</div>
		<ul>
			<li>
				<div style="width:26%;display: inline-block;">姓名</div>
				<input style="width: 65%;height: 0.7rem;" type="text" name="" id="name" value="" />
			</li>
			<li>
				<div style="width:26%;display: inline-block;">手机号码</div>
				<input style="width: 65%;height: 0.7rem;" type="number" name="" id="tel" value="" />
			</li>
			<li style="position: relative;">
				<div style="width:26%;display: inline-block;">验证码</div>
				<input style="width: 30%;height: 0.7rem;" type="number" name="" id="code" value="" />
				<!--<div class="huoqu" id="huoqu1">获取验证码</div>-->
				<input type="button" class="huoqu" id="huoqu1" value="获取验证码" />
			</li>
			<li>
				<div style="width:26%;display: inline-block;">就职学校</div>
				<input style="width: 65%;height: 0.7rem;" type="text" name="" id="school" value="" />
			</li>
			<li>
				<div style="width:26%;display: inline-block;">任教年级</div>
				<select name="" value="" id="nianji">
					<option value="0">请选择</option>
					<option value="1">一年级</option>
					<option value="2">二年级</option>
					<option value="3">三年级</option>
					<option value="4">四年级</option>
					<option value="5">五年级</option>
					<option value="6">六年级</option>
				</select>
			</li>
			<li class="custom-checkbox" id="xuezhi">
				<div style="width:26%;display: inline-block;">领书学制</div>
				<input type="radio" name="xuezhi" value="六三制" id="liusan" checked />
				<label class="value">六三制</label>
				<input type="radio" name="xuezhi" value="五四制" id="wusi" />
				<label class="value">五四制</label>
			</li>
			<li class="custom-checkbox" id="get_grade">
				<div style="width:26%;display: inline-block;float: left;">领书年级</div>
				<div style="float: left;margin-left: 0.1rem;">
					<div>
						<input type="radio" name="get_grade" value="1" checked />
						<label class="value">一年级</label>
						<input type="radio" name="get_grade" value="2" />
						<label class="value">二年级</label>
						<input type="radio" name="get_grade" value="3" />
						<label class="value">三年级</label>
					</div>
					<div style="margin-top: 0.1rem;">
						<input type="radio" name="get_grade" value="4" />
						<label class="value">四年级</label>
						<input type="radio" name="get_grade" value="5" />
						<label class="value">五年级</label>
						<input type="radio" name="get_grade" value="6" class="six" />
						<label class="value six">六年级</label>
					</div>
				</div>
			</li>
			<li class="custom-checkbox" id="subject">
				<div style="width:26%;display: inline-block;">领取科目</div>
				<input type="radio" name="subject" value="1" id="chinese" checked />
				<label class="value">语文</label>
				<input type="radio" name="subject" value="2" id="math" />
				<label class="value">数学</label>
			</li>
			<li class="custom-checkbox" id="banben">
				<div style="width:26%;display: inline-block;float: left;">版本</div>
				<div style="float: left;margin-left: 0.1rem;">
					<div>
						<input type="radio" name="banben" value="1" checked />
						<label class="value">北师版</label>
						<input type="radio" name="banben" value="2" />
						<label class="value">苏教版</label>
					</div>
					<div style="margin-top: 0.1rem;">
						<input type="radio" name="banben" value="3" />
						<label class="value">人教版</label>
						<input type="radio" name="banben" value="4" />
						<label class="value">沪教版</label>
					</div>
				</div>
			</li>
			<li>
				<div style="width:26%;display: inline-block;">学校所在地区</div>
				<select name="intention" value="" id="intention">
					<option value="0">请选择</option>
					<option value="上海">上海</option>
					<option value="北京">北京</option>
					<option value="济南">济南</option>
					<option value="淄博">淄博</option>
					<option value="青岛">青岛</option>
					<option value="太原">太原</option>
					<option value="长春">长春</option>
					<option value="哈尔滨">哈尔滨</option>
					<option value="南京">南京</option>
					<option value="大连">大连</option>
					<option value="重庆">重庆</option>
					<option value="长沙">长沙</option>
					<option value="石家庄">石家庄</option>
					<option value="成都">成都</option>
					<option value="深圳">深圳</option>
					<option value="昆明">昆明</option>
					<option value="郑州">郑州</option>
					<option value="杭州">杭州</option>
					<option value="贵阳">贵阳</option>
					<option value="其他">其他</option>
				</select>
			</li>
			<li>
				<div style="width:26%;display: inline-block;">学校详细地址</div>
				<input style="width: 65%;height: 0.7rem;" type="text" name="" id="address" value="" />
			</li>
			<li style="overflow: hidden;">
				<div style="width:29%;display: inline-block;float: left;">本人教师资格证</div>
				<div class="z_photo">
					<div class="z_file" data-id="1" onclick="fileSelect($(this));">
						<span>+</span>
						<em class="number">上传图片</em>
					</div>
					<input type="file" hidden="hidden" name="file[]" id="file_1" onchange="uploadFile();" value="" accept="image/*" multiple  />
				</div>
			</li>
		</ul>
		<div id="subm" class="button">
			预约领取
		</div>
		<img style="width: 100%;" src="http://tmall.fc62.com/mobile/themesmobile/68ecshopcom_mobile/images/teacherform_info.jpg" alt="">
	</div>
	
</body>
<script>
	var getUrlStr =  function(key) {
        // 获取参数
        var url = window.location.search;
        // 正则筛选地址栏
        var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
        // 匹配目标参数
        var result = url.substr(1).match(reg);
        //返回参数值
        return result ? decodeURIComponent(result[2]) : null;
      }
	$(function(){
		//选择五四制隐藏六年级
		$("#liusan").click(function(){
			$(".six").show();
		});
		$("#wusi").click(function(){
			$(".six").hide();
		});
		//选择语文隐藏版本
		$("#chinese").click(function(){
			$("#banben").hide();
		});
		$("#math").click(function(){
			$("#banben").show();
		});
		//获取验证码
	  	$('#huoqu1').click(function() {
		var tel = $('#tel').val();
		if(!(/^1[3456789]\d{9}$/.test(tel))) {
			layer.open({
				content: '请输入正确的手机号码',
				skin: 'msg',
				time: 2 //2秒后自动关闭
			});
			return false;
		}
            $.ajax({
                type: 'post',
                url:"/api/sms/send",
                data:{mobile:tel,event:'teacher'},
                success: function(data){
                    console.log(data);
                    if(data.code != 1){
                        layer.open({
                            content:data.msg ,
                            skin: 'msg',
                            time: 2 //2秒后自动关闭
                        });
                        return false
                    }else{
                        var count = 120;
                        const countDown = setInterval(() => {
                            if (count === 0) {
                            $('.huoqu').val('重新发送').removeAttr('disabled');
                            $('.huoqu').css({
                                background: '#f3494c',
                                color: '#fff',
                            });
                            clearInterval(countDown);
                        } else {

                            $('.huoqu').css({
                                background: '#eee',
                                color: '#333',
                            });
                            $('.huoqu').val(count + '秒后可重新获取');
                            $('.huoqu').attr('disabled', true);
                        }
                        count--;
                    }, 1000);
                    }
                }
            });
	  });
	  //提交表单
	  $('#subm').click(function(){
		var name = $('#name').val();
		var tel = $('#tel').val();
		var code = $('#code').val();
		var school = $('#school').val();
		var nianji = $('#nianji').val();
		var xuezhi = $('#xuezhi input[type="radio"]:checked').val();
		var get_grade = $('#get_grade input[type="radio"]:checked').val();
		var subject = $('#subject input[type="radio"]:checked').val();
		if(subject==1){
		    var banben='';
		}else{
            var banben = $('#banben input[type="radio"]:checked').val();
		}

		var intention = $('#intention').val();
		var address = $('#address').val();var source = getUrlStr('source');
		var file = $('#file_1')[0].files[0];
		var formdata = new FormData();
		  formdata.append("name", name);
		  formdata.append("tel", tel);
		  formdata.append("school", school);
		  formdata.append("nianji", nianji);
		  formdata.append("xuezhi", xuezhi);
		  formdata.append("get_grade", get_grade);
		  formdata.append("subject", subject);
		  formdata.append("banben", banben);
		  formdata.append("intention", intention);
		  formdata.append("address", address);
		  formdata.append("source", source);
		  formdata.append("Filedata",file);
		if(name == ""||name == null){
			layer.open({
				content: '姓名不能为空',
				skin: 'msg',
				time: 2 //2秒后自动关闭
			});
			return false;
		}
		if(!(/^1[3456789]\d{9}$/.test(tel))) {
			layer.open({
				content: '请输入正确的手机号码',
				skin: 'msg',
				time: 2 //2秒后自动关闭
			});
			return false;
		}
		if(code == ""||code == null){
			layer.open({
				content: '验证码不能为空',
				skin: 'msg',
				time: 2 //2秒后自动关闭
			});
			return false;
		}
		if(school == ""||school == null){
			layer.open({
				content: '请输入所在学校',
				skin: 'msg',
				time: 2 //2秒后自动关闭
			});
			return false;
		}
		if(nianji == 0){
			layer.open({
				content: '请选择任教年级',
				skin: 'msg',
				time: 2 //2秒后自动关闭
			});
			return false;
		}
		if(subject == ""|| subject == null){
		    layer.open({
		        content: '请选择领取科目',
		        skin: 'msg',
		        time: 2 //2秒后自动关闭
		    });
		    return false;
		}
		if(intention == ""||intention == null){
			layer.open({
				content: '请选择所在地区',
				skin: 'msg',
				time: 2 //2秒后自动关闭
			});
			return false;
		}
		if(address == ""||address == null){
			layer.open({
				content: '请填写详细地址',
				skin: 'msg',
				time: 2 //2秒后自动关闭
			});
			return false;
		}
		if($('#file_1')[0].files[0] == "" || $('#file_1')[0].files[0] == undefined){
			layer.open({
				content: '请上传本人教师资格证',
				skin: 'msg',
				time: 2 //2秒后自动关闭
			});
			return false;
		}
          $.ajax({
              type: 'post',
              url:"/api/sms/check" ,
              data:{mobile:tel,captcha:code,event:'teacher'},
              success: function(data){
                  if(data.code == 0){
                      layer.open({
                          content: data.msg,
                          skin: 'msg',
                          time: 2,
                      });
                      return false;
                  }else{
                      $.ajax({
                          type: 'post',
                          url: "/index/ques/teacher" ,
                          processData: false, // 告诉jQuery不要去处理发送的数据
                          contentType : false,
                          dataType: "json",
                          data:formdata,
                          success: function(data){
                              if(data.status == 0) {
                                  window.location.href="http://oa.fc62.com/index/ques/teacher_success";
                              }
                              else{
                                  layer.open({
                                      content: data.msg,
                                      skin: 'msg',
                                      time: 2, //2秒后自动关闭
                                  });
                              }
                          }
                      });
                  }

              }
          });

	});
});
  //上传图片
  var number = $('.z_file').attr('data-id');
  function fileSelect() {
	document.getElementById('file_'+number).click();
  }
  function uploadFile()
  {
	var imgUrl = window.URL.createObjectURL(document.getElementById("file_"+number).files[0]);
	var html = '<div class="headerBox">\n' +
	  '            <img class="img_close" onclick="del($(this))" src="http://tmall.fc62.com/mobile/themesmobile/68ecshopcom_mobile/images/img_close.png"/>' +
	  '            <img id="imgBox_'+number+'" src="'+imgUrl+'"/>\n' +
	  '        </div>\n';
	$(".z_photo").prepend(html);
	// $('.number').text(number +'/1');
	number++;
	$('.z_file').attr('data-id',number);

	if(number == 2)
	{
	  $('.z_file').hide();
	}
  }
  function del(thi) {
	thi.parent().remove();
	number--;
	// $('.number').text(number - 1 +'/1');
	$('.number').text('上传图片');
	if(number != 2 ){
	  $('.z_file').show();
	}
	$('.z_file').attr('data-id',number);
	$('#file_'+number).val('');
  }
</script>

</html>   